<template>
 <div>
   <table>
     <h2>费用信息</h2>
   <tr>
     <td>应收单号：{{ feeInfo.receivableNumber }}</td>
     <td>订单号：{{ feeInfo.orderNumber }}</td>
     <td>运输费：{{ feeInfo.transportationFee }}元</td>
     <td>保险费：{{ feeInfo.insuranceFee }}元</td>
   </tr>
     <tr>
       <td>包装费：{{ feeInfo.packagingFee }}元</td>
       <td>装卸费：{{ feeInfo.handlingFee }}元</td>
       <td>中转费：{{ feeInfo.transferFee }}元</td>
       <td>燃油费：{{ feeInfo.fuelFee }}元</td>
     </tr>
     <tr>
       <td>服务费：{{ feeInfo.serviceFee }}元</td>
       <td>其他费用：{{ feeInfo.otherFees }}元</td>
       <td>费用合计：{{ feeInfo.transferFee }}元</td>
     </tr>

     <h2>应收</h2>
     <tr>
       <td>现付：{{ feeInfo.cashPayment }}元</td>
       <td>预付：{{ feeInfo.advancePayment }}元</td>
       <td>到付：{{ feeInfo.cashOnDelivery }}元</td>
       <td>周期付：{{ feeInfo.periodicPayment }}元</td>
     </tr>
     <tr>
       <td>应收合计付：{{ feeInfo.payableAmount }}元</td>
     </tr>
     <h2>实收</h2>
     <div class="actual-receipt-section">
       <h2>实收</h2>
       <div class="input-group">
         <span>现付</span>
         <el-input v-model="actualReceipt.cashPayment" placeholder="请输入内容" ></el-input>
       </div>
       <div class="input-group">
         <span>预付</span>
         <el-input v-model="actualReceipt.advancePayment" placeholder="请输入内容"></el-input>
       </div>
       <div class="input-group">
         <span>到付</span>
         <el-input v-model="actualReceipt.cashOnDelivery" placeholder="请输入内容"></el-input>
       </div>
       <div class="input-group">
         <span>周期付</span>
         <el-input v-model="actualReceipt.periodic" placeholder="请输入内容"></el-input>
       </div>
       <div class="input-group">
         <span>实收合计</span>
         <el-input v-model="actualReceipt.total" placeholder="请输入内容"></el-input>
       </div>
       <div class="input-group">
         <span>备注</span>
         <el-input type="textarea" v-model="actualReceipt.remark" placeholder="请输入内容"></el-input>
       </div>
     </div>
   </table>

   <div slot="footer" class="dialog-footer">
     <el-button @click="">取 消</el-button>
     <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
   </div>

 </div>

</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      feeInfo: {},
      id: this.$route.query.id,
      actualReceipt: {},
      dialogFormVisible: false,
      }
    },
  created() {
    this.id = this.$route.query.id;
    this.onSubmit();
  },
  methods:{
    sss(){
      console.log(123)
    },
    onSubmit(){
      axios.get("http://localhost:10086/finance/receivable/gitById",{params:{id:this.id}}).then(res=>{
        console.log(res);
        this.feeInfo = res.data.data;
      })
    }

  },

};
</script>

